<style>
/*   
   table {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;
    }
    td:first-child {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    } */
</style>

<div class="text-right table">
  <input type="checkbox" id="checkbox-1" ng-model="ctrl.showcompleted" ng-change="ctrl.Search()">
  <label for="checkbox-1"><span translate lib="web">completed</span></label>
</div>

<div ng-show="ctrl.errormessage != ''"" class=" alert alert-danger" role="alert">{{ctrl.errormessage}}</div>
<table id="table1" class="table table-striped" when-scrolled="ctrl.more()" style="width: 100%;">
  <thead class="thead-dark">
    <tr>
      <th><strong translate lib="web" ng-click="ctrl.ToggleOrder('name')">name</strong></th>
      <th><strong translate lib="web" ng-click="ctrl.ToggleOrder('state')">state</strong></th>
      <th><strong translate lib="web" ng-click="ctrl.ToggleOrder('_created')">created</strong></th>
      <th><strong translate lib="web" ng-click="ctrl.ToggleOrder('_modified')">updated</strong></th>
      <th><strong translate lib="web" ng-click="ctrl.ToggleOrder('_createdby')">createdby</strong></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="model in ctrl.models">
      <td class="overflow-hidden">
        <a ng-href="#/Form/{{model.workflow}}/{{model._id}}" ng-hide="ctrl.loading==true || model.form == 'none'">{{model.name}}</a>
      </td>
      <td>{{model.state}}</td>
      <td>
        <timesince ng-model="model._created" />
      </td>
      <td>
        <timesince ng-model="model._modified" />
      </td>
      <td>{{model._createdby}}</td>
      <td class="btn-cell">
        <a ng-href="#/Form/{{model.workflow}}/{{model._id}}" ng-hide="ctrl.loading==true || model.form == 'none'"><em
            class="fas fa-book-open"></em></a>
      </td>
    </tr>
  </tbody>
</table>